<template>
  <div class="bsWrapper" ref="bswrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
export default {
  name: "BScroll",
  props: {
    probeType: {
      type: Number,
      default() {
        return 0;
      }
    },
    pullUpLoad: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      scroll: null
    };
  },
  methods: {
    scrollTo(x, y, during = 500) {
      this.scroll && this.scroll.scrollTo(x, y, during);
    },
    refresh() {
      this.scroll && this.scroll.refresh();
		},
		finishPullUp(){
			this.scroll && this.scroll.finishPullUp()
			this.refresh()
		}
  },
  mounted() {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BetterScroll(this.$refs.bswrapper, {
          click: true,
          probeType: this.probeType,
          pullUpLoad: this.pullUpLoad,
          // 这是"better-scroll"2.0以上版本的插件，也是监听滚动内容中图片的加载。然后防抖调用refresh方法。
          observeImage: {
            debounceTime: 300 // ms
          }
        });
        if (this.probeType == 2 || this.probeType == 3) {
          this.scroll.on("scroll", position => {
            this.$emit("getPosition", position);
          });
        }
        if (this.pullUpLoad) {
          this.scroll.on("pullingUp", () => {
						this.$emit("pullingUp")
          });
        }
      } else {
        this.scroll.refresh();
      }
    });
  }
};
</script>

<style>
.content {
  position: relative;
}
</style>
